<template>
	<view class="all">
		<view class="topone">
			<view class="topone_image">
				<image class="img_one" src="/src/static/logo.png" mode=""></image>
			</view>
		</view>
		<view class="toptwo">
			<view class="toptwo_one iconfont icon-shouye1" @click="goAddress()">万达广场店</view>
			<view class="toptwo_one iconfont icon-fenxiang">分享</view>
		</view>
		<view class="swiper_lista" >
		
			<mySwiper></mySwiper>

		</view>
		<view class="types_list" @click.capture="gototypes">
			<scrolllist></scrolllist>
		</view>
		<view class="Limited-time_flash_deals"  >
			<limitetime></limitetime>
		</view>
		<view class="" style="width: 100%; height: 20%; background-color: ghostwhite; ">
			<div class="limit_top">
				<view class="left">
					<text>特惠拼盘</text> &nbsp;&nbsp;&nbsp;&nbsp;
					<text>已拼团3320</text>
				</view>
				<view class="right" @click="gopintuan">
					
					<text >查看全部 <wd-icon name="arrow-right" size="30rpx"></wd-icon> </text>
				</view>

			</div>
			<view class="" style="width: 100%; height: 100%; ">
				
				<scroll-view scroll-x="true" style="white-space: nowrap; width: 100%; height: 80%;">

					<view style="display: inline-block; width: 30%; margin: 0 30rpx;" v-for="(item) in list.slice(0, 10)" :key="item._id">
						
						<div style="text-align: center; width: 100%; height: 100%;" @click="goShop(item)">
							<image :src="item.img" style="width: 90%; height: 120rpx;"></image>
							<div>
								<view class="" style="width: 100%; font-weight: 300; margin-bottom: 10rpx;">{{item.name.length > 4 ? item.name.slice(0, 4) + '...' : item.name}}
								</view>
							</div>
							<div style="color: #d81e06;font-size: 20rpx;">
								拼团价￥{{item.price}}
							</div>
						</div>
					</view>
					

				</scroll-view>
			</view>
		</view>
		<view class="Specialty_merchandise" @click="gozhuanti">
			<div style="display: flex; justify-content: space-around; margin: 10rpx auto;">
				<div class="" style="width: 50%; height: 260rpx; ;  ">
					<image src="https://img0.baidu.com/it/u=4147519344,2284796450&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1730480400&t=00a6b9308b36c62913b81d025755953a" mode="" style="width: 100%; height: 100%;"></image>

				</div>
				<div
					style="width: 45%; height: 260rpx;  display: flex; flex-direction: column; justify-content: space-around;">
					<div style="width: 90%; height: 45%;">
						<image src="https://img1.baidu.com/it/u=3711852460,1823696929&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1730480400&t=37a45c116ccbedf9930242847d9d46d8" mode="" style="width: 100%; height: 100%;"></image>
					</div>
					<div style="width: 90%; height: 45%;">
						<image src="https://img2.baidu.com/it/u=4201469674,1796387771&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1730480400&t=e0666c97322bc56e796593e6e5ebc607" mode="" style="width: 100%; height: 100%;"></image>
					</div>

				</div>
			</div>
<div style="width: 98%; height: 170rpx; background-color: ghostwhite;
; margin: 0 auto;">
	<image src="https://gd-hbimg.huaban.com/small/f2cc58f47e18e03acc225073f2a208bbf3723f80c76d-5r3l2F_fw480webp" mode="" style="width: 100%; height: 100%;"> </image>
</div>
		</view>
		<view class="shop_list">
			
<shoplist></shoplist>

		</view>

	</view>
</template>

<script setup>
	// import '../font_4723695_pit043kzhr7/iconfont.css';
	import mySwiper from '../../../../components/Indexpages/mySwiper.vue';
	import scrolllist from '../../../../components/Indexpages/scroll_list.vue';
	import limitetime from '../../../../components/Indexpages/limite-time.vue';
	import shoplist from '../../../../components/Indexpages/Shoplist.vue';
	import {shop_search} from '@/utils/api.ts';

import { ref, onMounted } from 'vue';
import {useMainStore} from '@/store/index';
import {useshopcar} from '@/store/shopcar';
import { storeToRefs } from 'pinia';
const userinfo = useMainStore()
const shopcar= useshopcar()
const { shopcarlist } = storeToRefs(shopcar)
const { list } = storeToRefs(userinfo)
import { shopcart,subtract_shopnum,update_cart_checked } from '@/utils/api.ts';
import { onShow } from '@dcloudio/uni-app';
const getlist = async () => {
  let data = await shopcart({ userid: localStorage.getItem('user_id') });
  console.log(data);
  shopcarlist.value = data.data;
};
onShow(() => {
  getlist();
})
onMounted(() => {
  getlist();
});
import {useNowShopStore} from "@/store/now_shop"
const nowShopStore = useNowShopStore()
function  goShop(an){
	// console.log(an)
	nowShopStore.setShop(an)
	uni.navigateTo({
	  url: "/pages/TypePages/shop_main/shop_main" // 跳转到对应路径的页面
	});
	
}
	const gototypes=()=>{
		uni.switchTab({
			url:'/pages/TypePages/types/types'
		})
	}
	
	const gopintuan=()=>{
		uni.navigateTo({
			url:'/pages/IndexPages/index/Pintuan'
		})
	}
	const gozhuanti=()=>{
		uni.navigateTo({
			url:'/pages/IndexPages/index/Tehui'
		})
	}
	
	function goAddress(){
		uni.navigateTo({
			url:"/pages/TypePages/address/address_change"
		})
	}
</script>

<style lang="scss" scoped>
	.all {
		width: 100%;
		height: 100vh;
		display: inline-block;
	}

	.topone {
		margin-top: 2%;
		display: flex;
		width: 100%;
		height: 5%;


		.topone_image {
			width: 20%;
			height: 100%;

			.img_one {
				width: 100%;
				height: 80%;
			}
		}
	}

	.toptwo {
		margin: 0 auto;
		line-height: 200%;
		display: flex;
		justify-content: space-between;
		width: 90%;
		height: 5%;

		.toptwo_one {
			font-size: 12px;
			font-weight: 100;
		}
	}

	.swiper_lista {
		width: 100%;
		height: 25%;

	}

	.types_list {
		width: 100%;
		height: 10%;

	}

	.Limited-time_flash_deals {
		border-radius: 10rpx;
		width: 98%;
		margin: 0 auto;
		height: 28%;
		background-color: ghostwhite;
	}

	.Specialty_merchandise {
		width: 98%;
		height: 450rpx;
		margin: 0 auto;
		background-color: ghostwhite;
		margin-top: 20rpx;
		image{
			border-radius: 10rpx;
		}
	}

	.shop_list {
		width: 100%;
		height: 100vh;
		background-color: #f0f0f0;
	}

	.limit_top {
		width: 100%;
		height: 20%;
		
		display: flex;
		justify-content: space-between;

		.right {
			font-size: 25rpx;
			color: gray;
			display: flex;
		}

		.left {
			font-weight: 600;
			font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		}

	}
</style>